<template>
  <!-- 频道管理页面 -->
  <div class="channelEdit">
    <!-- 当前登录用户已经订阅的频道 -->
    <div class="channel">
      <!-- border是否展示外边框 -->
      <van-cell title="我的订阅" :border="false">
        <!--
            type: 按钮类型,
            plain: 将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。
        -->
        <van-button type="danger" size="mini" plain @click="editing=!editing">
          {{ editing ? '取消' : '编辑' }}
        </van-button>
      </van-cell>
      <!-- 宫格：展示用户订阅的频道 -->
      <van-grid>
        <van-grid-item
          :class="{current:index===active}"
          v-for="(item,index) in channels" :key="item.id" @click="clickMyChannel(index)">
          <span>{{ item.name }}</span>
          <!-- 加一个图标，后面用于取消订阅 -->
          <van-icon name="cross" class="btn" v-show="editing && index!==0" @click="clickDeleteChannel(item,index)"/>
        </van-grid-item>
      </van-grid>
    </div>

    <!-- 当前登录用户没有订阅的频道 -->
    <div class="channel">
      <van-cell title="选择订阅" :border="false"/>
      <van-grid>
        <van-grid-item v-for="item in optionalChannels" :key="item.id" @click="clickAddChannel(item)">
          <span>{{ item.name }}</span>
        </van-grid-item>
      </van-grid>
    </div>

  </div>
</template>

<script>
  // 引入vuex中的mapGetters函数，在本组件的computed计算方法中
  // 配合...mapGetter来获取getters中的数据
  import { mapGetters } from 'vuex'
  // 引入vuex中的mapState函数，可以获取vuex中state里的属性值
  import { mapState } from 'vuex'
  // 引入频道模块API
  import { reqSetChannels } from '@/api/channels.js'

  export default {
    name: 'channelEdit',
    props: ['active'],
    data () {
      return {
        // 是否处于编辑状态
        editing: false
      }
    },
    computed: {
      // 获取用户没有订阅的频道
      ...mapGetters('channels', ['optionalChannels']),
      // 获取用户订阅的频道
      ...mapState('channels', ['channels'])
    },
    methods: {
      /**
       * 点击频道，实现订阅
       * @param index 要订阅的频道下标，首页显示的频道数据和频道管理的频道数据，
       *        都是从vuex中读取的，所以它们的index索引也是一致的
       */
      clickMyChannel (index) {
        // 将事件传递给父组件处理
        this.$emit('change-channel', index)
      },

      clickAddChannel (channel) {
        // 提交一个mutations，用来操作局部vuex中的state数据
        // 1.添加频道到局部vuex中的mutations，mutations来添加数据到state
        // 修改局部vuex中的频道列表channels
        this.$store.commit('channels/addChannel', channel)
        // 2.重制频道
        this.buildChannels()
      },

      clickDeleteChannel (channel, index) {
        // 删除频道需要重制下标
        //当前频道被删除，需要子传父，通知父组件，更新active=0
        if (index === this.active) {
          this.$emit('updateChannel', 0)
        }
        // 如果index < this.active,说明删除的是当前频道之前的，更新active=this.active-1
        // 如果 >,则是当前频道之后的，不会打乱active下标顺序
        if (index < this.active) {
          this.$emit('updateChannel', this.active - 1)
        }

        // 提交一个mutations，用来操作局部vuex中的state数据
        // 1.添加频道到局部vuex中的mutations，mutations来删除数据到state
        // 修改局部vuex中的频道列表channels
        this.$store.commit('channels/deleteChannel', channel)
        // 2.重制频道
        this.buildChannels()
      },

      /**
       * 重制频道方法，支持增删改
       */
      async buildChannels () {
        // 1.this.channels从局部vuex中获取频道列表
        const channelsList = this.channels.map((item, index) => {
          return {
            id: item.id,
            req: index
          }
        })
        // 2.推荐频道是不需要发送给后台的，所以删除集合中第一个数据
        channelsList.shift()
        // 4.发送接口,重制用户频道
        await reqSetChannels(channelsList)
      }

    }
  }
</script>

<style lang="scss" scoped>
  .channel {
    padding: 15px;
    font-size: 14px;

    ::v-deep .van-button--mini {
      height: 22px;
      min-width: 50px;
    }

    .btn {
      position: absolute;
      top: 5px;
      right: 5px;
      font-size: 14px;
    }
  }

  // 需要高亮的频道样式
  .current {
    color: #e92322;
    font-weight: 700;
  }
</style>
